<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="h_top">
          <div class="bread_title">
            <span>新增备件</span>
          </div>
          <div class="save_button">
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-back" size="mini" @click="goBack">返回</el-button>
            </div>
            <div class="buttonBox">
              <el-button type="primary" icon="el-icon-document-checked" size="mini" @click="save">保存</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div>
      <el-row>
        <el-form ref="form" :model="data" :inline="true" :rules="formRules">
          <el-row :gutter="10">
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="coding">
                <div>编号</div>
                <el-input v-model="data.coding" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="name">
                <div>名称</div>
                <el-input v-model="data.name" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="brand">
                <div>品牌</div>
                <el-input v-model="data.brand" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="spec">
                <div>型号</div>
                <el-input v-model="data.spec" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="cost_id">
                <div>成本中心</div>
                <v-select v-model="data.cost_id" action="costList" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="unit">
                <div>单位</div>
                <el-input v-model="data.unit" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="number">
                <div>当前数量</div>
                <el-input v-model="data.number" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="min_number">
                <div>最小数量</div>
                <el-input v-model="data.min_number" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="max_number">
                <div>最高库存</div>
                <el-input v-model="data.max_number" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="department">
                <div>部门</div>
                <el-select v-model="data.department" size="mini">
                  <el-option v-for="(item, index) in partsDepartment" :key="index" :value="index" :label="item" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="admin_id">
                <div>负责人</div>
                <v-select v-model="data.admin_id" action="adminList" :query="{category_id:90}" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="price">
                <div>价格</div>
                <el-input v-model="data.price" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="category">
                <div>分类</div>
                <v-select v-model="data.category" action="partCategoryList" :paging="false" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="store_id">
                <div>仓库</div>
                <v-select v-model="data.store_id" action="storeList" :query="{kind:0}" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="store_location_id">
                <div>库位</div>
                <v-select v-model="data.store_location_id" :disabled="!data.store_id" :query="{store_id:data.store_id}" action="storeLocationList" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="status">
                <div>状态</div>
                <el-select v-model="data.status" size="mini">
                  <el-option v-for="(item, index) in commonStatus" :key="index" :value="index" :label="item" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="replace_coding">
                <div>可替换编码</div>
                <el-input v-model="data.replace_coding" size="mini" />
              </el-form-item>
            </el-col>
            <el-col :xl="3" :lg="4" :md="5" :sm="6">
              <el-form-item prop="sort">
                <div>排序</div>
                <el-input v-model="data.sort" size="mini" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-tabs>
          <el-tab-pane label="描述">
            <el-row :gutter="10">
              <el-col :span="24">
                <Tinymce id="content" v-model="data.content" />
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
  </div>
</template>

<script>
import API from '@/api/stock/parts'
import { commonStatus, partsDepartment } from '@/utils/options'
import Tinymce from '@/components/Tinymce/index'
import VSelect from '@/components/select'
export default {
  inject: ['addOne', 'goUrl'],
  components: {
    Tinymce,
    VSelect
  },
  data() {
    return {
      data: {
        coding: '',
        name: '',
        unit: '',
        number: '',
        min_number: '',
        max_number: '',
        order_number: '',
        delivery_day: '',
        price: '',
        replace_coding: '',
        sort: 100
      },
      commonStatus,
      partsDepartment,
      formRules: {
        coding: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          }
        ],
        name: [
          {
            required: true,
            message: '请输入备件名称',
            trigger: 'blur'
          }
        ],
        brand: [
          {
            required: true,
            message: '请输入品牌',
            trigger: 'blur'
          }
        ],
        spec: [
          {
            required: true,
            message: '请输入型号',
            trigger: 'blur'
          }
        ],
        cost_id: [
          {
            required: true,
            message: '请选择成本中心',
            trigger: 'change'
          }
        ],
        unit: [
          {
            required: true,
            message: '请输入单位',
            trigger: 'blur'
          }
        ],
        number: [
          {
            required: true,
            message: '请输入当前数量',
            trigger: 'blur'
          }
        ],
        min_number: [
          {
            required: true,
            message: '请输入最小数量',
            trigger: 'blur'
          }
        ],
        max_number: [
          {
            required: true,
            message: '请输入最高库存',
            trigger: 'blur'
          }
        ],
        department_id: [
          {
            required: true,
            message: '请选择部门',
            trigger: 'change'
          }
        ],
        price: [
          {
            required: true,
            message: '请输入价格',
            trigger: 'blur'
          }
        ],
        category: [
          {
            required: true,
            message: '请选择分类',
            trigger: 'change'
          }
        ],
        store_id: [
          {
            required: true,
            message: '请选择仓库',
            trigger: 'change'
          }
        ],
        store_location_id: [
          {
            required: true,
            message: '请选择库位',
            trigger: 'change'
          }
        ],
        status: [
          {
            required: true,
            message: '请选择状态',
            trigger: 'change'
          }
        ],
        sort: [
          {
            required: true,
            message: '请输入排序',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    save() {
      const thisData = this.data
      const thisForm = this.$refs.form
      this.addOne(API, thisData, thisForm)
    },
    goBack() {
      this.goUrl('/stock/parts')
    }
  }
}
</script>
